<template>
  <div id="add-room">
    <div class="add-header">
      <div class="add-title">添加房间</div>
    </div>
    <div class="add-main clear">
      <div class="add-mian1 clear">
        <span class="add-img-span">房间封面图</span>
        <div class="add-img-box">
          <el-upload
            action="#"
            list-type="picture-card"
            :auto-upload="false"
            :limit="1"
          >
            <i slot="default" class="el-icon-plus"></i>
            <div slot="file" slot-scope="{ file }">
              <img
                class="el-upload-list__item-thumbnail"
                :src="file.url"
                alt=""
              />
              <span class="el-upload-list__item-actions">
                <span
                  class="el-upload-list__item-preview"
                  @click="handlePictureCardPreview1(file)"
                >
                  <i class="el-icon-zoom-in"></i>
                </span>
                <span
                  v-if="!disabled"
                  class="el-upload-list__item-delete"
                  @click="handleDownload1(file)"
                >
                  <i class="el-icon-download"></i>
                </span>
                <span
                  v-if="!disabled"
                  class="el-upload-list__item-delete"
                  @click="handleRemove1(file)"
                >
                  <i class="el-icon-delete"></i>
                </span>
              </span>
            </div>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl1" alt="" />
          </el-dialog>
        </div>
      </div>
      <div class="add-main2 clear">
        <span class="add-title-span">房间标题</span>
        <input class="add-title-input" type="text" />
      </div>
      <div class="add-main3 clear">
        <span class="add-price-span">房间价格</span>
        <el-input-number
          v-model="addPrice"
          :step="1000"
          controls-position="right"
          @change="handleChange1"
          :min="0"
        ></el-input-number>
      </div>
      <div class="add-main4 clear">
        <span class="add-img-publicity-span">房间宣传图</span>
        <div class="add-img-publicity-box">
          <el-upload
            action="#"
            list-type="picture-card"
            :auto-upload="false"
            :limit="3"
          >
            <i slot="default" class="el-icon-plus"></i>
            <div slot="file" slot-scope="{ file }">
              <img
                class="el-upload-list__item-thumbnail"
                :src="file.url"
                alt=""
              />
              <span class="el-upload-list__item-actions">
                <span
                  class="el-upload-list__item-preview"
                  @click="handlePictureCardPreview2(file)"
                >
                  <i class="el-icon-zoom-in"></i>
                </span>
                <span
                  v-if="!disabled"
                  class="el-upload-list__item-delete"
                  @click="handleDownload2(file)"
                >
                  <i class="el-icon-download"></i>
                </span>
                <span
                  v-if="!disabled"
                  class="el-upload-list__item-delete"
                  @click="handleRemove2(file)"
                >
                  <i class="el-icon-delete"></i>
                </span>
              </span>
            </div>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl2" alt="" />
          </el-dialog>
        </div>
      </div>
      <div class="add-main5 clear">
        <span class="add-status-span">房间状态</span>
        <div class="add-status-date"></div>
        <!-- 房间状态日历 -->
      </div>
      <div class="add-main6 clear">
        <span class="add-config-span">房间配置</span>
        <div class="add-config-box clear">
          <el-input-number
            v-model="addRoom"
            :step="1"
            controls-position="right"
            @change="handleChange2"
            :min="0"
            size="mini"
          ></el-input-number>
          <span class="add-config-span1"> 卧室</span>
          <el-input-number
            v-model="addBed"
            :step="1"
            controls-position="right"
            @change="handleChange3"
            :min="0"
            size="mini"
          ></el-input-number>
          <span class="add-config-span2">床</span>
          <el-input-number
            v-model="addBathRoom"
            :step="1"
            controls-position="right"
            @change="handleChange4"
            :min="0"
            size="mini"
          ></el-input-number>
          <span class="add-config-span3">卫生间</span>
          <el-input-number
            v-model="addPeopleNum"
            :step="1"
            controls-position="right"
            @change="handleChange5"
            :min="0"
            size="mini"
          ></el-input-number>
          <span class="add-config-span4">人数</span>
        </div>
      </div>
      <div class="add-main7 clear">
        <span class="add-desc-span">房间描述</span>
        <div class="add-desc-input">
          <el-input
            type="textarea"
            :rows="10"
            placeholder="请输入内容"
            v-model="addDesc"
          >
          </el-input>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogImageUrl1: "",
      dialogImageUrl2: "",
      dialogVisible: false,
      disabled: false,
      addTitle: "",
      addPrice: 0,
      addRoom: 0,
      addBed: 0,
      addBathRoom: 0,
      addPeopleNum: 0,
      addDesc:"",
    };
  },
  methods: {
    handleRemove1(file) {
      console.log(file);
    },
    handlePictureCardPreview1(file) {
      this.dialogImageUrl1 = file.url;
      this.dialogVisible = true;
    },
    handleDownload1(file) {
      console.log(file);
    },
    handleRemove2(file) {
      console.log(file);
    },
    handlePictureCardPreview2(file) {
      this.dialogImageUrl1 = file.url;
      this.dialogVisible = true;
    },
    handleDownload2(file) {
      console.log(file);
    },
    handleChange1(value) {
      console.log(value);
    },
    handleChange2(value) {
      console.log(value);
    },
    handleChange3(value) {
      console.log(value);
    },
    handleChange4(value) {
      console.log(value);
    },
    handleChange5(value) {
      console.log(value);
    },
  },
  components: {},
};
</script>

<style lang="scss">
body {
  overflow-x: hidden;
}
#add-room {
  width: 1280px;
  margin: 0 auto;
  background-color: white;
  border: 1px solid rgb(185, 182, 182);
}
.add-title {
  padding-top: 20px;
  font-weight: 600;
  font-size: 30px;
}
.add-img-box {
  float: left;
  margin-left: 3%;
  margin-top: 20px;
}
.add-img-span {
  float: left;
  margin-top: 70px;
  margin-left: 3%;
  font-weight: 600;
}
.add-title-span {
  float: left;
  font-weight: 600;
  margin-left: 3%;
  margin-top: 30px;
}
.add-title-input {
  float: left;
  margin-top: 25px;
  margin-left: 4%;
  width: 300px;
  height: 30px;
  outline: none;
  border-radius: 5px;
  border: 1px solid green;
}
.add-price-span {
  float: left;
  font-weight: 600;
  margin-left: 3%;
  margin-top: 30px;
}
.add-main3 {
  .el-input-number {
    float: left;
    margin-top: 20px;
    margin-left: 4%;
  }
}
.add-img-publicity-span {
  float: left;
  font-weight: 600;
  margin-left: 3%;
  margin-top: 70px;
}
.add-img-publicity-box {
  float: left;
  margin-left: 3%;
  margin-top: 20px;
}
.add-status-span {
  float: left;
  font-weight: 600;
  margin-left: 3%;
  margin-top: 150px;
}
.add-status-date {
  float: left;
  width: 30%;
  height: 300px;
  border: 1px solid black;
  margin-left: 4%;
  margin-top: 30px;
}
.add-config-span {
  float: left;
  font-weight: 600;
  margin-left: 3%;
  margin-top: 80px;
}
.add-config-box {
  float: left;
  margin-top: 75px;
  margin-left: 4%;
  .el-input-number {
    float: left;
  }
}
.add-config-span1 {
  float: left;
  margin-top: 2px;
}
.add-config-span2 {
  float: left;
  margin-top: 2px;
}
.add-config-span3 {
  float: left;
  margin-top: 2px;
}
.add-config-span4 {
  float: left;
  margin-top: 2px;
}
.add-desc-span {
  float: left;
  font-weight: 600;
  margin-left: 3%;
  margin-top: 50px;
}
.add-desc-input{
  float: left;
  width: 50%;
  margin-top: 70px;
  margin-left: 3%;
  margin-bottom: 30px;
}
</style>
